<template>
  <div class="home_div">
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '47873a2ed45a5ddb52014b43451fc645'
}
export default {
  name: 'MapContainer',
  props: {
    markerData: {
      type: Array
    },
    isShowInfo: {
      type: Boolean,
      default: false
    },
    currentLocal: {
      type: Object
    }
  },
  // 子组件监听父组件传值
  watch: {
    markerData: {
      // handler就是处理监听变动时的函数
      // 此处监听markerData
      handler () {
        this.initAMap()
      },
      deep: true // 深度监听父组件传过来对象变化
    }
  },
  data () {
    return {
      map: null,
      infoWindow: null,
      infoShow: true,
      code: null,
      planModle: true
    }
  },
  created () {
    this.initAMap()
    window.closeMessage = this.closeMessage
    window.goNaviga = this.goNaviga
  },
  methods: {
    initAMap () {
      console.log('map-container')
      // const content = [
      //   `<div class="header-box">
      //     <span class="title">广州市社会保障卡服务网点电子地图</span>
      //     <span class="descriptionis">您可以根据网点类型、区域查找离您最近的网点</span>
      //   </div>`
      // ]
      AMapLoader.load({
        key: '00f10b6e5ddb0be3626bb199e0584b72', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Walking'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          version: '1.1',
          plugins: []
        }
      }).then((AMap) => {
        this.AMap = AMap
        // 初始化地图对象，加载地图
        this.map = new AMap.Map('container', { // 设置地图容器id
          resizeEnable: true, // 开启窗体
          viewMode: '3D', // 是否为3D地图模式
          zoom: 9, // 初始化地图级别
          center: [113.27, 23.13] // 初始化地图中心点位置
        })
        console.log(this.markerData)
        // 自定义窗体
        this.addMarker(this.map, AMap, this.markerData)
      }).catch(e => {
        console.log(e)
      })
    },

    addMarker (map, AMap, markerData) {
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        offset: new AMap.Pixel(0, -10) // 让窗体位置向上移30
      })
      // 为了方便调用信息窗体对象的close方法
      this.infoWindow = infoWindow
      // eslint-disable-next-line no-unused-vars
      const markerNowLoc = new AMap.Marker({
        // Number(113.3372), Number(23.1306)
        // Number(this.currentLocal.longitude), Number(this.currentLocal.latitude)
        position: new AMap.LngLat(Number(this.currentLocal.nowLongitude), Number(this.currentLocal.nowLatitude)), // 定位点位置：经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9],
        map: map,
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
        offset: new AMap.Pixel(-10, -30)
      })
      for (let i = 0; i < markerData.length; i++) {
        let marker = null
        // 创建定位点标记
        marker = new AMap.Marker({
          position: new AMap.LngLat(Number(markerData[i].longitude), Number(markerData[i].latitude)), // 定位点位置：经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9],
          map: map
        })
        const imgLogo = require('../assets/image/elecard.png')
        // ToDo 以下图片暂时使用，以后替换
        marker.content =
          `<div style="position: relative; margin: -40px 20px 20px; padding: 0 25px 0 15px; background-color: #fff; box-shadow: 0 0 37.5px #e8e8e8; border-radius: 15px;">
            <span
              onclick="closeMessage()"
              style="position: absolute; right: 12px; top: 0px; color: #ccc; font-size: 20px"
            >x</span>
            <div style="display: flex; align-items: center; padding: 10px 0; border-bottom: 2px solid #e8e8e8;">
              <h5 style="font-size: 17px; color: rgba(21, 105, 255);">${markerData[i].agencyName}</h5>
            </div>
            <div style="padding: 10px 0; display: flex;">
              <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                <div style="width: 60px; height: 60px; margin-bottom: 30px; background: url(${imgLogo});  background-size: 100% 100%; "></div>
                <div onclick="goNaviga(${markerData[i].longitude}, ${markerData[i].latitude}, '${markerData[i].agencyName}', '${markerData[i].areaName}', '${markerData[i].agencyType}', '${markerData[i].agencyAddress}', '${markerData[i].phone}', '${markerData[i].isBusiness}', '${markerData[i].isPromptly}')" style="width: 50px; height: 25px; background: rgba(21, 105, 255); font-size: 14px; color: #fff; line-height: 25px; text-align: center; border-radius: 2px;">导航</div>
              </div>
              <div>
                <div style="font-size: 14px; line-height: 27px;"><span style="font-weight: 700;">网点类型：</span>${markerData[i].agencyType}</div>
                <div style="font-size: 14px; line-height: 27px;"><span style="font-weight: 700;">所属区域：</span>${markerData[i].areaName}</div>
                <div style="font-size: 14px; line-height: 27px;"><span style="font-weight: 700;">所属地址：</span>${markerData[i].agencyAddress}</div>
                <div style="font-size: 14px; line-height: 27px;"><span style="font-weight: 700;">是否社保卡业务办理网点：</span>${markerData[i].isBusiness}</div>
                <div style="font-size: 14px; line-height: 27px;"><span style="font-weight: 700;">是否即时制卡网点：</span>${markerData[i].isPromptly}</div>
              </div>
            </div>
            <div style="position: absolute; bottom: -13%; left: 46.5%; width: 0; height: 0; border-color: #fff transparent transparent transparent; border-style: solid; border-width: 25px 10px 10px 10px; box-shadow: 0 0 37.5px #e8e8e8;"></div>
          </div>`
        // <div style="width: 50px; height: 50px; background: url('../assets/image/outletlogo.png') no-repeat; background-size: inherit;"></div>
        // markerClick()
        marker.on('click', markerClick)
        // 若为点击选择列表网点则自动展示信息框体
        if (this.isShowInfo) {
          // 自动展示
          marker.emit('click', { target: marker })
        } else {
          // 点击展示
          marker.emit('onClick', { target: marker })
        }
      }

      function markerClick (e) {
        infoWindow.setContent(e.target.content)
        infoWindow.open(map, e.target.getPosition())
      }
      map.setFitView()
    },
    // 销毁地图
    destroyed () {
      this.map && this.map.destroy()
      this.map = null
      this.mapModule = null
    },
    // 关闭信息框体
    closeMessage () {
      this.infoWindow.close()
    },
    // , , agencyAddress, phone, isPromptly, isBusiness
    // , areaName, agencyType, agencyAddress, phone, isPromptly, isBusiness,
    goNaviga (longitude, latitude, agencyName, areaName, agencyType, agencyAddress, phone, isBusiness, isPromptly) {
      this.$emit('showNaviga', longitude, latitude, agencyName, this.infoShow, this.planModle, areaName, agencyType, agencyAddress, phone, isBusiness, isPromptly)
    }
  }
}
</script>

<style scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>
